<template>
  <el-form
    ref="editFormRef"
    :style="{ width: '30%' }"
    :model="formData"
    :rules="rules"
    label-position="left"
    :label-width="'200px'"
  >
    <el-form-item label="是否开启评论/留言板" prop="openCommentType">
      <div>
        <el-radio-group v-model="formData.openCommentType">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <template v-if="formData.openCommentType == 1">
      <el-form-item label="畅言appId" prop="changyanAppId">
        <el-input :maxLength="50" v-model="formData.changyanAppId" />
      </el-form-item>
      <el-form-item label="畅言appKey" prop="changyanAppKey">
        <el-input :maxLength="50" v-model="formData.changyanAppKey" />
      </el-form-item>
    </template>

    <el-form-item label="是否开启Git Pages" prop="gitPagesType">
      <div>
        <el-radio-group v-model="formData.gitPagesType">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item label="开启公安备案和ICP备案信息" prop="showIcp">
      <el-radio-group v-model="formData.showIcp">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="formData.showIcp == 1">
      <el-form-item label="ICP备案域名" prop="icpDomain">
        <el-input :maxLength="200" v-model="formData.icpDomain" />
      </el-form-item>
      <el-form-item label="ICP备案号" prop="icpNo">
        <el-input :maxLength="100" v-model="formData.icpNo" />
      </el-form-item>
      <el-form-item label="公安备案省份" prop="policeProvince">
        <el-select v-model="formData.policeProvince" clearable showSearch>
          <el-option
            v-for="(item, index) in provinceList"
            :label="item"
            :value="item"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公安备案号" prop="policeNo">
        <el-input :maxLength="100" v-model="formData.policeNo" />
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onBeforeMount } from "vue"
const { proxy } = getCurrentInstance();

onBeforeMount(()=>{
  getSystemSetting()
})

const formData = reactive({});
// 省份
const provinceList = ["京", "津", "冀", "晋", "蒙", "辽", "吉", "黑", "沪", "苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "桂", "琼", "渝", "川", "黔", "滇", "藏", "陕", "甘", "青", "宁", "新", "台", "港", "澳"]
// 表单校验
const rules = {
  openCommentType: [{ required: true, message: "是否开启评论不能为空" }],
  changyanAppId: [{ required: true, message: "畅言appId不能为空" }],
  changyanAppKey: [{ required: true, message: "畅言appKey不能为空" }],
  gitPagesType: [{ required: true, message: "是否开启Git Pages不能为空" }],
  showIcp: [{ required: true, message: "是否开启公安备案和ICP备案信息不能为空" }],
  icpDomain: [{ required: true, message: "ICP备案域名不能为空" }],
  icpNo: [{ required: true, message: "ICP备案号不能为空" }],
  policeProvince: [{ required: true, message: "公安备案省份不能为空" }],
  policeNo: [{ required: true, message: "公安备案号不能为空" }],
}
// 获取设置信息
const getSystemSetting = async () => {
  let result = await proxy.Request({
    url: "/sysSetting/getSysSetting"
  })
  if (result != null) {
    Object.assign(formData, result.data)
  }
};

// 保存
const submitForm = () => {
  proxy.$refs.editFormRef.validate(async (valid) => {
    if (!valid) {
      return false;
    }
    let params = {};
    Object.assign(params, formData);
    let result = await proxy.Request({
      url: "/sysSetting/saveSysSetting",
      params: params,
    });
    if (!result) {
      proxy.$message.error("保存失败");
      return;
    }
    proxy.$message.success("保存成功");
  });
};

</script>

<style lang="scss" scoped>
</style>